<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 注意：项目正式环境请勿引用该地址 -->
    <link href="layui/css/layui.css" rel="stylesheet">
</head>
<body>


<script type="text/html" id="toolbarDemo">
        <button class="layui-btn layui-btn-sm" lay-event="insert" id="addPlate"><i
                class="layui-icon">&#xe654;</i>新增
        </button>
        <button class="layui-btn layui-btn-sm" lay-event="deleteAll">批量删除</button>
        <div class="layui-inline" style="float:right;height:29px;" title="搜索" lay-event="search"><i
                class="layui-icon layui-icon-search"></i></div>
        <input type="text" id="userName" name="userName" style="width:200px;float:right;height:30px;"
               placeholder="请输入用户名称"
               autocomplete="off" class="layui-input">
</script>



<!-- 注意：项目正式环境请勿引用该地址 -->
<script src="layui/layui.js"></script>


<script>
    layui.use('table', function () {
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;
        var layer = layui.layer;

        //温馨提示：默认由前端自动合计当前行数据。从 layui 2.5.6 开始： 若接口直接返回了合计行数据，则优先读取接口合计行数据。
        //详见：/docs/modules/table.html#totalRow
        table.render({
            height: 'full-55'
            , minLength: "80",
            elem: '#myTable'
            , id: 'myTable2'
            , url: 'selectUser'
            , toolbar: '#toolbarDemo'
            , title: '用户数据表'
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'userId', title: '用户Id', fixed: 'left'}
                , {field: 'userName', title: '用户名称'}
                , {field: 'userRoleId', title: '角色Id'}
                , {field: 'userFlag', title: '是否在用'}
                , {title: '操作', toolbar: '#barDemo'}
            ]]
                , page: true
        });

        table.on('toolbar(myTable2)', function (obj) {
                //根据事件对象 来判定点击的是哪一个案例
                if (obj.event == 'insert') {
                    layer.open({
                        type: 1,
                        title: '新增商品信息',
                        area: ['800px', '500px'],
                        content: $("#addDiv")
                        // insertUsers
                    })
                } else if (obj.event == 'delete') {
                    alert('删除事件触发');
                } else if (obj.event == 'search') {
                    alert(111);
                    var userName = $("#userName").val();
                    table.reload('myTable2', {
                        method: "post",
                        url: "selectLikeUser"
                        , where: {
                            'userName': userName
                        }
                    })
                }
//给添加绑定事件
                form.on('submit(addUser)', function () {
                    //发送ajax请求到服务器
                    //得到表单的所有数据
                    var formData = form.val("addUser");
                    $.post({
                        url: "insertUsers",
                        data: formData,
                        function(msg) {
                            if (msg == "ok") {
                                parent.layer.msg('添加成功', {
                                    title: '提示',
                                    area: ['200px',
                                        '140px'],
                                    time: 5000
                                });
                                table.reload('myTable');
                            } else {
                                layer.msg("增加失败，请重新输入");
                            }
                        }
                        //重新刷新表格
                    })

                });

            });

        table.on('tool(myTable2)', function (obj) {
            switch (obj.event) {
                case "edit":
                    //获取选中行的数据
                    var data = obj.data;
                    //拼接成json格式的字符串
                    var cashObj = $.parseJSON(JSON.stringify(data));
                    //将数据加载到窗口
                    form.val("editform", cashObj);
                    layer.open({
                        type: 1,
                        title: "修改用户",
                        content: $("#editContent"),
                        area: ['800px', '550px'],
                    });
                    break;
                case "del":
                    // alert("选中的行：" + obj.data.userId);
                    layer.confirm('您确定要删除吗?', function (index) {
                        layer.close(index);
                        //获取当前行的数据
                        var data = obj.data;
                        //发送请求到服务器执行删除操作
                        $.post(
                            "deleteUsers",
                            data,
                            function (msg) {
                                if (msg == "yes") {
                                    //回调函数，刷新表格数据
                                    table.reload('myTable2');
                                } else {
                                    alert("删除失败")
                                }
                            });
                    });
                    break;
            }
        });

        //给修改的form绑定提交事件
        form.on('submit(editsubmit)', function (data) {
            //得到表单的所有数据
            var formData = form.val("editform");
            alert('formData=' + formData.userId);
            //发送ajax请求到 服务器，
            $.post({
                url: "updateUser",
                data: formData,
                function(msg) {
                    if (msg == 'yes') {
                        //重新刷新表格
                        table.reload('cash');
                        layer.closeAll();
                        //给予提示信息，增加成功

                        layer.msg('修改成功', {
                            title: '提示',
                            area: ['200px',
                                '140px'],
                            time: 0,
                            btn: ['知道了']
                        });
                    } else {
                        //关闭窗口
                        layer.closeAll();
                        //给予提示信息，增加成功
                        layer.msg('修改失败', {
                            title: '提示',
                            area: ['200px',
                                '140px'],
                            time: 0,
                            btn: ['知道了']
                        });
                    }
                }
            })
        })
        }
    );
</script>

<!--表格-->
<table class="layui-hide" id="myTable" lay-filter="myTable2" ></table>

<!--            给表单右测增加超链接-->
<div style="display: none;" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">
        <i class="layui-icon">&#xe642;</i>编辑</a>
    <button id="deleteUsers" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
        <i class="layui-icon">&#xe640;</i>删除</button>
</div>
<!--新增窗口-->
<div id="addDiv">
    <!--    增加-->
    <form id="addUser" lay-filter="addUser"
          class="layui-form layui-form-pane"
          style="margin: 30px auto; display: inline-block;" >
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label layui-bg-gray" style="width: 140px; margin-left: 35px">用户Id</label>
            <div class="layui-input-inline">
                <input type="text" lay-verify="required"
                       autocomplete="off" placeholder="用户Id" class="layui-input" name="userId">
            </div>
            <label class="layui-form-label layui-bg-gray" style=" width: 140px;margin-left: 50px;">用户名称</label>
            <div class="layui-input-inline">
                <input type="text" lay-verify="required" name="userName"
                       autocomplete="off" placeholder="用户名称 " class="layui-input"
                       onkeyup="value=value.replace(/[\d]/g,'') "
                       onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\d]/g,''))">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center;">
            <label class="layui-form-label layui-bg-gray" style="width: 140px; margin-left: 35px">用户ID</label>
            <div class="layui-input-inline">
                <input type="text" lay-verify="required"
                       autocomplete="off" placeholder="角色ID" class="layui-input" name="userRoleId">
            </div>

            <label class="layui-form-label" style="width: 140px; margin-left: 50px">是否在用</label>
            <div class="layui-inline layui-show-xs-block" style="width: 190px">
                <select name="userFlag">
                    <option  value="">请选择</option>
                    <option value="1">在用</option>
                    <option  value="-1">禁用</option>
                </select>
            </div>
        </div>
        <label class="layui-form-label layui-bg-gray" style="width: 140px; margin-left: 35px">用户密码</label>
        <div class="layui-input-inline">
            <input type="text" lay-verify="required"
                   autocomplete="off" placeholder="用户密码" class="layui-input" name="userPas">
        </div>    <div class="layui-form-item" style="position: absolute;left: 35%; bottom: 60px">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="addUser"><i class="layui-icon">&#x1005;</i>添加</button>
                <button type="reset" class="layui-btn layui-btn-primary"> <i class="layui-icon">&#x1006;</i>取消</button>
            </div>
        </div>
    </form>


</div>
<!--修改-->
<div id="editContent" style="display: none; height: 100%; height: 100%; text-align: center;">
    <form id="editform" lay-filter="editform"
          class="layui-form layui-form-pane"
          style="margin: 30px auto; display: inline-block;">
<div class="layui-form-item" style="text-align: center;">
    <label class="layui-form-label layui-bg-gray" style="width: 140px; margin-left: 35px">用户Id</label>
    <div class="layui-input-inline">
        <input type="text" lay-verify="required"
               autocomplete="off" placeholder="用户Id" class="layui-input" name="userId">
    </div>
    <label class="layui-form-label layui-bg-gray" style=" width: 140px;margin-left: 50px;">用户名称</label>
    <div class="layui-input-inline">
        <input type="text" lay-verify="required" name="userName"
               autocomplete="off" placeholder="用户名称 " class="layui-input"
               onkeyup="value=value.replace(/[\d]/g,'') "
               onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\d]/g,''))">
    </div>
</div>
<div class="layui-form-item" style="text-align: center;">
    <label class="layui-form-label layui-bg-gray" style="width: 140px; margin-left: 35px">用户ID</label>
    <div class="layui-input-inline">
        <input type="text" lay-verify="required"
               autocomplete="off" placeholder="角色ID" class="layui-input" name="userRoleId">
    </div>

    <label class="layui-form-label" style="width: 140px; margin-left: 50px">是否在用</label>
    <div class="layui-inline layui-show-xs-block" style="width: 190px">
        <select name="userFlag">
            <option  value="">请选择</option>
            <option value="1">在用</option>
            <option  value="-1">禁用</option>
        </select>
    </div>
</div>
<label class="layui-form-label layui-bg-gray" style="width: 140px; margin-left: 35px">用户密码</label>
<div class="layui-input-inline">
    <input type="text" lay-verify="required"
           autocomplete="off" placeholder="用户密码" class="layui-input" name="userPas">
</div>
        <div style="position: absolute; bottom: 0px; left: 45%;">
            <!--lay-submit="" 具备提交功能  lay-filter   具有筛选作用-->
            <button class="layui-btn" lay-submit="" lay-filter="editsubmit">
                <i class="layui-icon">&#x1005;</i>修改
            </button>
            <button class="layui-btn layui-bg-red cancel" type="button">
                <i class="layui-icon">&#x1006;</i>取消
            </button>
        </div>
</form>
</div>
</body>
</html>